import { Router, Route, Switch } from 'react-router-dom'
import history from './utils/history'
// BrowserRouter = Router + BrowerHistory

import NotFound from '@/pages/NotFound/NotFound.jsx'

import PrivateRoute from '@/components/PrivateRoute'

import { lazy, Suspense } from 'react'

// 导入页面组件
const Login = lazy(() => import('@/pages/Login/Login.jsx'))
const Layout = lazy(() => import('@/pages/Layout/Layout.jsx'))

function Abc () {
  return (<h1>abc</h1>)
}
function App() {
  return (
    <div className="app">
      <Router history={history}>
      <Suspense
        fallback={
          <div
            style={{
              textAlign: 'center',
              marginTop: 200
            }}
          >
            loading...
          </div>
        }
      >
        <Switch>
          {/* 
          <Route path="/abc" render={()=>{
            if(hasToken()) {
              return <Layout></Layout>
            } else {
              return <Redirect to="/login"/>
            }
          }} /> 
          */}
          <Route path="/login" component={Login} />
          {/* <Route path="/home" component={Layout} /> */}
          <PrivateRoute path="/home" component={Layout}></PrivateRoute>
          <PrivateRoute path="/abc" component={Abc}></PrivateRoute>
          <Route component={NotFound} />
        </Switch>
        </Suspense>
      </Router>
    </div>
  );
}

export default App;
